<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- v-text 指令 他不会解析标签 也就是会将变量的值当成一个字符串来渲染 他是基于原生js的 innerText 完成的 -->
        <!-- <div v-text="msg"></div> -->
        <!-- v-html指令 他会解析标签 基于原生js的 innerHTML完成的 -->
        <!-- <div v-html="msg"></div> -->
        <!-- 
            v-bind 绑定一个属性 属性的值可以写成一个变量 v-bind可以绑定任意属性 也可以绑定自定义属性
            v-bind可以缩写为 ":"
         -->
        <!-- <div v-bind:title="text" @click="text = '诺克萨斯'">这是我的内容</div>
        <div :title="text" @click="text = '诺克萨斯'">这是我的内容</div> -->
        <!-- 
            v-model 通常使用在表单元素中 他是一个数据双向绑定的指令 也就是说数据改变会更新视图 视图中的数据改变也会影响数据
            v-model 是通过object.defineProperty()实现的 vue通过observers 利用object.defineProperty()将data中的所有的数据都添加上了getter/setter方法
            vue中的指令又会通过compile去解析模板和vue指令的当然也会解析"{{}}" 当数据发生变化时 可以同过watcher里面的update方法通知compile更新模板 watcher就是用来监听页面数据变化的

            diff算法： diff的意思就是diffrient 不同的意思  
            vue在生成dom的时候会备份出一份完全相同dom树， 而当数据更新时 dom树会发生变化这时候将备份的dom树和当前渲染的dom树进行对比 如果发现不同 就重新渲染dom树
            他会查找模板中不同的数据 如果发现数据有不同就重新渲染模板 但是因为这种机制也给代码运行带来了一些压力 效率低 消耗内存
         -->
        <!-- <input type="text" v-model="text">
        <p>{{text}}</p> -->
        <!-- v-show 是通过css样式控制元素的显示和隐藏 隐藏式通过display: none; 实现的 -->
        <!-- <div v-show="show">这是show控制的内容</div>
        <button @click="show = !show">点击</button> -->
        <!-- 
            v-if 是通过删除和创建dom元素控制元素的显示和隐藏的
            v-if v-else-if 和 v-else只能同级元素使用 
        -->
        <!-- <div v-if="flag === 1">lol</div> -->
        <!-- 错误写法 -->
        <!-- <div>
            <div v-else-if="flag === 2">dnf</div>
        </div>
        <div v-else>cf</div>
        <button @click="changeFlag">点击</button> -->
        <!-- 
            v-for指令是一个循环指令 可以用来循环数组，对象，字符串 
            v-for循环数组的时候有两个参数 第一个是数组项(表示数组中的每一项) 第二个是索引值 也叫下标
            v-for循环对象的时候有三个参数 第一个是键值对的值（value） 第二个是键值对的键（key）第三个是下标 
            v-for循环字符串跟循环数据的参数是一样的
         -->
        <!-- <div v-for="(item, index) in arr2">{{item}} ---- {{index}}</div> -->
        <!-- <div v-for="(value, key, index) in area">
            <h3>{{key}} ---- {{index}}</h3>
            <ul>
                <li v-for="item in value">{{item}}</li>
            </ul>
        </div>
        <div v-for="(item, index) in str">{{item}} --- {{index}}</div> -->
        <!-- v-pre会让元素跳过编译直接渲染 -->
        <!-- <div v-pre>
            <div>{{msg}}</div>
            {{str}}
        </div> -->
        <!-- v-cloak 这个指令保持在元素上直到关联实例结束编译 再当前版本的vue-cli教授架中是不会出现这种闪烁的现象的 因为已经通过webpack提前处理了-->
        <!-- <div v-cloak v-for="item in arr2">{{item.title}}</div> -->
        <!-- 
            v-on 绑定所有的事件类型以及自定义事件的方法 它可以简写为@ 
            vue在绑定事件时可以给事件添加修饰符 修饰符可以串联
            修饰符 @click.stop // 阻止冒泡
            @click.prevent // 阻止默认事件
            @click.stop.prevent // 先阻止冒泡 再组织默认事件
            @click.once // 事件只执行一次
            @click.self // 事件只作用于元素自身
            @click.cupture // 开启事件捕获
        -->
        <!-- v-slot -->
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                // msg: 'hello text'
                msg: "<div>hello text</div>",
                text: "德玛西亚",
                show: true,
                flag: 1,
                arr: ['星期一', '星期二', '星期三'],
                arr2: [{
                    title: '星期一'
                }, {
                    title: '星期二'
                }, {
                    title: '星期三'
                }],
                area: {
                    "A": ["安阳", "安徽"],
                    "B": ["北京", "保定"],
                    "C": ["长安", "长沙"]
                },
                str: '我要升班去工作'
            },
            methods: {
                changeFlag() {
                    this.flag = 2
                }
            }
        })
    </script>
</body>

</html>